<template>
	<view class="page flex flex-direction">
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content"></block>
		</cu-custom>
		<view class="flex-sub" style="overflow-y: scroll;">
			<view class="header bg-blue" style="padding: 0 16px 16px 16px;">
				<view class="text-xxl flex flex-direction align-center">
					<view class="text-bold">
						{{mobile.mobileCheckName}}
					</view>
					<view class="margin-top-xs cu-tag text-white text-lg padding" style="border-top-left-radius: 10px;border-bottom-right-radius: 10px; background-color: #e64340;">
						工程巡检
					</view>
				</view>
				<view class="cu-list grid col-2 no-border" style="background-color: transparent;">
					<view class="cu-item">
						<view class="text-xl text-green">
							{{mobile.patrolTime|formatPatrolTime}}
						</view>
						<view class="margin-top-xs">
							巡查时长
						</view>
					</view>
					<view class="cu-item">
						<view class="text-xl text-gray">
							{{mobile.patrolLength}}米
						</view>
						<view class="margin-top-xs">
							距离
						</view>
					</view>
					<view class="cu-item">
						<view class="text-xl text-yellow">
							{{mobile.patrolEmployeeName}}
						</view>
						<view class="margin-top-xs">
							巡查人
						</view>
					</view>

					<view class="cu-item">
						<view class="text-xl text-red">
							{{mobile.errorCount}}
						</view>
						<view class="margin-top-xs">
							隐患数
						</view>
					</view>

				</view>
				<view class="margin-top-xs flex">
					<view class="flex-sub flex flex-direction">
						<view class="margin-top-xs">
							开始时间：{{mobile.patrolStartTime|formatTime}}
						</view>
						<view class="margin-top-xs">
							结束时间：{{mobile.patrolEndTime|formatTime}}
						</view>
					</view>
					<view class="flex align-center">
						<span class="" style="background-color: #d1ffe7;color: #07c160;border-radius: 30px;padding: 5px 10px;" @tap="clickPatrolPath">
							巡查轨迹<i class="cuIcon cuIcon-right"></i>
						</span>
					</view>
				</view>
			</view>
			<!-- 列表 -->
			<view class="padding-lr margin bg-white shadow radius" v-for="(target,targetIndex) in contents" :key="targetIndex">
				<view class="text-blue text-lg solid-bottom text-bold padding-tb">
					{{target.target}}
				</view>
				<view class="cu-list divider">
					<view class="cu-item" style="padding: 10px 0;" v-for="(item,index) in target.dangerList" :key="index">
						<view class="flex text-black align-center text-lg">
							<view class="flex-sub">
								{{item.patrolIndexTitle}}
							</view>
							<view class="cu-tag line-green" v-if="item.hasError==0">
								正常
							</view>
							<view class="cu-tag line-red" v-else>
								异常
							</view>
						</view>
						<view class="margin-top-xs">
							{{item.patrolIndexName}}
						</view>
						<view class="text-red margin-top-xs" v-if="item.dangerDesc">
							{{item.dangerDesc}}
						</view>
						<!-- 附件列表 -->
						<view class="grid col-4 grid-square flex-sub margin-top-xs" v-if="item.attachementInfos.length>0">
							<view class="bg-img" v-for="(imgItem,imgIndex) in item.attachementInfos" :key="imgIndex" @tap="ViewImage"
							 :data-src="baseUrl+imgItem.attchPath" :data-type="imgItem.type">
								<image :src="baseUrl+imgItem.attchPath" v-if="imgItem.type=='jpg'" mode="aspectFill"></image>
								<image src="../../static/patrol/patrol_mobile_device_default_video.png" v-if="imgItem.type=='mp4'" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-modal" :class="modelVideo.show?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">播放视频</view>
					<view class="action" @tap="clickHideModel">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="" style="margin: 0 10px;">
						<video :src="modelVideo.src" controls style="width: 100%;" :style="{'height':modelVideo.show?'200px':'0px'}"></video>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../util/apis/api-patrol.js'
	import ui from '../../util/ui.js'
	import constant from '../../util/constant.js'


	let that = null;
	export default {
		filters: {
			formatPatrolTime: function(seconds) {
				// 处理时间 格式  时分秒
				let startHours = parseInt(seconds / 3600);
				let startMinutes = parseInt((seconds % 3600) / 60);
				let startSeconds = parseInt((seconds % 3600) % 60);
				let timeStr = (startHours < 10 ? ('0' + startHours) : startHours) + "时" + (startMinutes < 10 ? ('0' + startMinutes) :
					startMinutes) + "分" + (startSeconds < 10 ? ('0' + startSeconds) : startSeconds) + "秒";
				return timeStr
			},
			formatTime: function(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				month = (month < 10 ? '0' + month : month);
				let day = date.getDate();
				day = (day < 10 ? '0' + day : day);
				let hour = date.getHours();
				hour = (hour < 10 ? '0' + hour : hour);
				let min = date.getMinutes();
				min = (min < 10 ? '0' + min : min);
				let sec = date.getSeconds();
				sec = (sec < 10 ? '0' + sec : sec);
				return year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + sec;
			}
		},
		data() {
			return {
				baseUrl: constant.baseUrl,
				modelVideo: {
					show: false,
					src: ''
				},
				mobile: {},
				contents: []
			}
		},
		onLoad(options) {
			that = this;
			let id = options.id;

			// 更具id获取数据
			ui.showLoading()
			api.getMobileHistoryInfo(id)
				.then(res => {
					that.mobile = res;
					// 整合contents数据
					for (let i = 0; i < res.contents.length; i++) {
						let danger = res.contents[i];
						let transformer = that.getPatrolTransformer(danger.patrolParentId);
						if (transformer == null) {
							transformer = {
								targetId: danger.patrolParentId,
								target: danger.patrolParentName,
								dangerList: [danger]
							}
							that.contents.push(transformer);
						} else {
							transformer.dangerList.push(danger);
						}
						// 处理一下附件
						let attachementInfos = danger.attachementInfos;
						for (let j = 0; j < attachementInfos.length; j++) {
							let attach = attachementInfos[j];
							let path = attach.attchPath;
							if (path.indexOf('.mp4') >= 0) {
								attach.type = 'mp4'
							}else{
								attach.type = 'jpg'
							}
						}
					}
					that.$forceUpdate();
				})
				.finally(() => {
					ui.hideLoading()
				});
		},
		methods: {
			/**
			 * 点击查询巡检轨迹
			 */
			clickPatrolPath: function() {
				let path = that.mobile.patrolCoors;
				if (!path) {
					ui.showErrorDialog('暂无巡检轨迹!');
					return;
				}
				path = encodeURIComponent(JSON.stringify(path));
				uni.navigateTo({
					url: './patrol_history_mobile_path?path=' + path
				})
			},
			
			/**
			 * 点击预览图片、视频
			 */
			ViewImage:function(e){
				let type = e.currentTarget.dataset.type;
				let src = e.currentTarget.dataset.src;
				if(type == 'jpg'){
					uni.previewImage({
						urls: [src]
					})
				}else if(type == 'mp4'){
					// 使用模态框预览视频
					that.modelVideo.show = true;
					that.modelVideo.src = src;
				}
			},
			/**
			 * 点击隐藏视频预览的模态框
			 */
			clickHideModel: function() {
				that.modelVideo.show = false;
				that.modelVideo.src = '';
			},

			// ———————————————————————————————私有方法———————————————————————————————————
			/**
			 * 在transformer列表中找出已存在的transformer
			 * @param {Object} targetId
			 */
			getPatrolTransformer: function(targetId) {
				let contents = that.contents;
				for (let i = 0; i < contents.length; i++) {
					let transformer = contents[i];
					if (transformer.targetId == targetId) {
						return transformer;
					}
				}
				return null;
			}
		}
	}
</script>

<style>
</style>
